﻿@inherits AdminCompontentBase

<DefaultSheetDialog Value="Visible" ValueChanged=UpdateVisible Title="@T("Add Role")">
    <MForm Model="Role" EnableValidation EnableI18n>
        <MStepper Value="_step">
            <MStepperItems>
                <MStepperContent Step="1">
                    <AutoHeight Overflow AutoClass="d-flex">
                        <AutoHeightContent>
                            <div style="width:100%;">
                                <div class="d-flex mb-12">
                                    <div class="mx-auto">
                                        <SNameTextField Value="@Role.Name" ValueChanged="NameChanged" ValueExpression="()=> Role.Name" Placeholder="@T("Name")" />
                                    </div>
                                </div>
                                <div>
                                    <STextField @bind-Value="Role.Code" Required Class="mb-6" Label="@T("Code")" />
                                    <STextField @bind-Value="Role.Limit" Class="mb-6" Label="@T("Limit the number of bindings")" />                                   
                                    <STextarea @bind-Value="Role.Description" Outlined Class="mb-6" Label="@T("Description")" />
                                </div>
                            </div>
                        </AutoHeightContent>
                        <FooterContent>
                            <div class="d-flex mt-6">
                                <MSpacer></MSpacer>
                                <SButton Medium OnClick="() => NextStep(context)">@T("Next step")</SButton>
                            </div>
                        </FooterContent>
                    </AutoHeight>
                </MStepperContent>
                <MStepperContent Step="2">
                    <AutoHeight Overflow>
                        <HeaderContent>
                            <div class="mb-6 mt-2">
                                <RoleSelectForRole @bind-Value="Role.ChildrenRoles" @ref="_roleSelect" />
                            </div>                         
                        </HeaderContent>
                        <AutoHeightContent>
                            <div class="global-nav" style="max-height:calc(100vh - 320px);">
                                <PermissionsConfigure Roles=Role.ChildrenRoles HasPreview
                                                     @bind-Value=Role.Permissions
                                                     @bind-Preview=_preview />
                            </div>
                        </AutoHeightContent>
                        <FooterContent>
                            <div class="d-flex mt-6">
                                <EnableSwitch Class="ml-1" @bind-Value="Role.Enabled" />
                                <MSpacer></MSpacer>
                                <SButton Medium OnClick="()=>_step=1" Outlined>@T("Previous step")</SButton>
                                <SButton Medium Outlined OnClick="() => _preview = true" Class="ml-6">@T("Preview")</SButton>
                                <SButton Medium Class="ml-6" OnClick="async () => await AddRoleAsync(context)">@T("Submit")</SButton>
                            </div>
                        </FooterContent>
                    </AutoHeight>
                </MStepperContent>
            </MStepperItems>
        </MStepper>      
    </MForm>
</DefaultSheetDialog>